import React, { useEffect, useState } from 'react'
import axios from 'axios'
import './style.scss'
import { useNavigate } from 'react-router-dom';
const Index = () => {
  const [list,  setList] = useState([]);
  const navigate = useNavigate()
  const getList = async () => {
    const resp = await axios.get('/api/list')
    console.log(resp.data.data)
    setList(resp.data.data)
  }

  useEffect(() => {getList()}, [])

  return (
    <div>
      {
        list.map(v => {
          return <dl key={v.id} className='list-item' onClick={() => navigate('/post/' + v.id)}>
            <dt>
              <img src={v.image} alt="" />
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <div className="tag">
                {
                  v.tags.map((v, i) => {
                    return <span key={i}>{v.name}</span>
                  })
                }
              </div>
              <div className="price">
                <div>
                  <span className="current">{v.oldPrice * v.discount / 10}</span>
                  <span className="old">{v.oldPrice}</span>
                </div>
                <div>
                  销售： {v.sellCount}
                </div>
              </div>
            </dd>
          </dl>
        })
      }
    </div>
  )
}

export default Index